<template>
	<view>
		<view class="container">
			<view class="head-input"><u-search placeholder="搜索" @search="searchlist" v-model="name"></u-search></view>
			<view class="head-nav"><u-tabs :list="listp" @click="clicksong" @change="changs" :current="page"></u-tabs></view>
		</view>
		<view>
			<view v-show="page == 0">
				<keep-alive><component :is="comm.homeall"></component></keep-alive>
			</view>
			<view v-show="page == 1">
				<keep-alive><component :is="comm.singer" :names="name"></component></keep-alive>
			</view>
			<view v-show="page == 2">
				<keep-alive><component :is="comm.playlist" :playlistname="name"></component></keep-alive>
			</view>
			<view v-show="page == 3">
				<keep-alive><component :is="comm.al" :arname="name"></component></keep-alive>
			</view>
			<view v-show="page == 4">
				<keep-alive><component :is="comm.ablum" :abumlname="name"></component></keep-alive>
			</view>
			<view v-show="page == 5">
				<keep-alive><component :is="comm.viodes" :videos="name"></component></keep-alive>
			</view>
			<view v-show="page == 6">
				<keep-alive><component :is="comm.users" :username="name"></component></keep-alive>
			</view>
		</view>
	</view>
</template>
<script>
import homeall from '../list/songall.vue';
import ablum from '../list/album.vue';
import playlist from '../list/playlist.vue';
import singer from '../list/singer.vue';
import ar from '../list/ar.vue';
import viodes from '../list/video.vue';
import users from '../list/user.vue';
export default {
	components: {
		homeall,
		ablum,
		ar,
		playlist,
		singer,
		viodes,
		users
	},
	data() {
		return {
			lists: '单曲',
			listp: [
				{
					name: '综合'
				},
				{
					name: '单曲'
				},
				{
					name: '歌单'
				},
				{
					name: '歌手'
				},
				{
					name: '专辑'
				},
				{
					name: '视频'
				},
				{
					name: '用户'
				}
			],
			page: 0,
			name: '',
			next: true,
			comm: {
				home: homeall,
				singer: singer,
				playlist: playlist,
				al: ar,
				ablum: ablum,
				viodes: viodes,
				users: users
			}
		};
	},
	onReachBottom() {},
	onLoad(val) {
		this.name = val.name;
	},
	methods: {
		searchlist() {
			console.log(this.name);
		},
		changs(item) {
			console.log(this.page);
		},
		clicksong(item) {
			this.page = item.index;
			switch (item.index) {
				case 1:
					this.$refs.sing.single();
					break;
				case 2:
					this.$refs.playlist.singlelist();
					break;
				case 3:
					this.$refs.ar.al();
					break;
				case 4:
					this.$refs.ablum.abuml();
					break;
				case 5:
					this.$refs.viode.singvideo();
					break;
				case 6:
					this.$refs.user.user();
					break;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	background-color: #f2f2f2;

	.head-input {
	}
	.head-nav {
		display: flex;
		margin-left: 30rpx;
		height: 60rpx;
		.list {
			flex: 0.3;
		}
		.act {
			color: red;
		}
	}
}
</style>
